<template>
	<uni-nav-bar title="待提货" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar rightText="兑换记录"
		@clickRight="navTo('gemstone/recordsList')"></uni-nav-bar>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<view class="package  direction-start list" v-for="(item,index) in orderLists" :key="item.id"
			@click="item.status===1?navTo('gemstone/orderDetail?id='+item.order_id):''"
			:style="{marginTop:index===0?'0rpx':'15rpx',paddingLeft:'10rpx'}">
			<view class="space-between" style="width:100%">
				<uni-icons :type="activeList.indexOf(item.id) !== -1?'checkbox-filled':'circle'" size="23"
					:color="activeList.indexOf(item.id) !== -1?'#FE3B2E':'#999'"
					@click="addShop(item.id,item.delivery_type)"></uni-icons>
				<image :src="item.image" mode=""></image>
				<view class="space-between" style="width:67%">
					<view class="direction-start" style="height:153rpx;justify-content:space-around;width:73%;">
						<view class="titles">{{item.name}}</view>
						<view v-if="item.type==='money'" style="font-size: 26rpx;color:#FE3B2E;">
							钱包价格:<text style="font-size: 24rpx;">￥</text>
							<text style="font-size: 38rpx;margin-left: 10rpx;">{{item.price}}</text>
						</view>
						<view v-else style="font-size: 26rpx;color:#5097FB;">
							蓝宝石<text style="font-size: 38rpx;margin-left: 10rpx;">{{item.score}}</text>
						</view>
						<view style="color:#666;font-size: 26rpx;" v-if="item.expirytime">有效期：{{item.expirytime}}</view>
					</view>
					<view class="direction-start"
						style="height:153rpx;justify-content:space-between;align-items: flex-end;">
						<view :style="{color:item.status===0?'#FA6A1F':''}">{{item.status_name}}</view>
					</view>
				</view>
			</view>
			<view v-if="item.store_name" style="font-size: 24rpx;color: #333333;margin-top:15rpx;">
				门店：{{item.store_name}}</view>
			<view class="center" v-if="item.status!==1" style="justify-content: flex-end;width:100%;">
				<view style="margin-right: 40rpx;" @click="del(item.id)">取消兑换</view>
				<view class="but" @click.stop="convert(item.delivery_type,item.id,item.name)">立即兑换
				</view>
			</view>
		</view>
		<Popu v-if="orderLists.length<1" :pageHeight="pageHeight" text="暂无兑换商品"></Popu>
	</scroll-view>
	<!-- 底部选择器 -->
	<view class="bottom space-between">
		<view class="center" @click="selectAll()">
			<text>全选</text>
			<uni-icons :type="active?'checkbox-filled':'circle'" size="23" :color="active?'#FE3B2E':'#999'"
				style="margin:0px 15rpx"></uni-icons>
			<text style="color:#FF5D45;">已选</text>
			<text style="color:#FF5D45;font-size: 36rpx;margin-left: 10rpx;">{{activeList.length}}</text>
		</view>
		<view @click="conversion()">立即兑换</view>
	</view>
	<!-- 实体商品发货 -->
	<ExchangePop ref="exchange" @submit="change"></ExchangePop>
	<!-- 虚拟商品发货 -->
	<ExchangeVip ref="virtually" :id="shopID" @submit="change"></ExchangeVip>
	<!-- 请添加客服微信 -->
	<KefuPop ref="customer"></KefuPop>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import ExchangePop from '@c/mine/exchangePop.vue';
	import ExchangeVip from '@c/mine/exchangeVip.vue';
	import KefuPop from '@c/mine/kefuPop.vue';
	import { onLoad,onShow } from '@dcloudio/uni-app';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { showLoading, errorToast, successToast } from '@/utils/prompt';
	import { myGoodsList } from '@/gql/integral';
	import { toPublish } from '@mqtt';
	import { ref } from 'vue';
	import { getDriverID } from '@/stores/driverID';
	import { useUserStore } from '@/stores/user';
	const driver_id = getDriverID();
	const userInfo = useUserStore();
	const exchange = ref(null)
	const virtually = ref(null)
	const customer = ref(null)
	const orderLists = ref([]);
	const isLoading = ref(false);
	const lastPage = ref(1);
	const currentPage = ref(1);
	const shopID = ref()

	const activeList = ref([])
	const activeAll = ref([])
	const active = ref(false)
	const pageHeight = ref()
	const type = ref()
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = (res.windowHeight - 100);
		},
	});
	onLoad((pearm) => {
		setTimeout(() => {
			if (pearm.id) {
				customer.value.open()
			}
		}, 1000)
	})
	onShow(() => {
		orderLists.value = []
		currentPage.value = 1
		init()
	})
	function init() {
		showLoading()
		isLoading.value = true;
		const payload = {
			query: myGoodsList,
			variables: {
				driver_id,
				page: currentPage.value,
			},
		};
		toPublish(
			'ql/score/myGoodsList',
			payload,
			(obj : any) => {
				const { myGoodsList } = obj.data;
				isLoading.value = false;
				orderLists.value = [...orderLists.value, ...myGoodsList.list];
				lastPage.value = myGoodsList.lastpage;
				activeAll.value = orderLists.value.map(item => item.id)
				if (activeAll.value.length != activeList.value.length) {
					active.value = false
				}
			}
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			init();
		}
	}
	//单个兑换
	function convert(num : number, id : number, name : string) {
		shopID.value = id
		if (num === 2) {
			virtually.value.open()
		} else {
			exchange.value.shares(name, id)
		}
	}
	function conversion() {
		if (!activeList.value) {
			errorToast('请选择您要兑换得商品')
			return
		}
		if (type.value === 2) {
			virtually.value.open()
		} else {
			exchange.value.shares('', activeList.value.join(','))
		}
	}
	function change() {
		activeList.value = []
		active.value = false
		orderLists.value = []
		currentPage.value = 1
		init();
	}
	//选中商品
	function addShop(id : number, types : number) {
		type.value = types
		if (activeList.value.indexOf(id) == -1) {
			activeList.value.push(id)
			if (activeAll.value.length == activeList.value.length) {
				active.value = true
			}
		} else {
			activeList.value.map((item, index) => item === id ? activeList.value.splice(index, 1) : '')
			active.value = false
		}
	}
	//全选
	function selectAll() {
		if (active.value) {
			activeList.value = []
			active.value = false
		} else {
			activeList.value = orderLists.value.map(item => item.id)
			active.value = true
		}
	}
	//取消兑换
	function del(id : number) {
		showLoading()
		const payload = {
			id,
			driver_id,
		};
		toPublish(
			'score/tuiDriverScoreGoods',
			payload,
			(obj : any) => {
				const { code, msg } = obj;
				if (code === 1) {
					userInfo.gemstone()
					userInfo.getUserInfo()
					successToast(msg)
					orderLists.value = orderLists.value.filter((item) => item.id == id ? item = null : item)
					activeList.value = []
					active.value = false
					activeAll.value = orderLists.value.map(item => item.id)
				} else {
					errorToast(msg)
				}
			}
		);
	}
</script>

<style scoped lang="less">
	.list {
		image {
			width: 153rpx;
			height: 153rpx;
			border-radius: 5px;
		}

		.but {
			width: 150rpx;
			height: 52rpx;
			background: linear-gradient(-66deg, #FF7B48, #FF5B45);
			border-radius: 5px;
			text-align: center;
			line-height: 52rpx;
			color: #fff;
		}

		.titles {
			width: 100%;
			font-size: 28rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}


	.lis {
		color: #666;

		view:nth-of-type(2) {
			width: 67rpx;
			height: 8rpx;
			margin-top: 10rpx;
			border-radius: 5px;
		}
	}

	.bottom {
		width: 100%;
		height: 96rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0px;
		left: 0px;
		z-index: 2;
		padding: 0px 20rpx;
		box-sizing: border-box;

		view:nth-of-type(2) {
			width: 180rpx;
			height: 68rpx;
			background: linear-gradient(-66deg, #FF7B48, #FF5B45);
			border-radius: 5px;
			color: #fff;
			text-align: center;
			line-height: 68rpx;
		}
	}
</style>